<template>
  <div>
    <div class="board-title" style="margin-bottom: 10px">设备列表</div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="70px"
    >
      <el-form-item label="设备状态" prop="status">
        <el-select
          v-model="queryParams.equipmentType"
          placeholder="请选择设备状态"
          clearable
          size="small"
          @change="getListPage"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        :cell-style="{ padding: this.tablePadding }"
        v-loading="loading"
        :data="equipmentList"
        highlight-current-row
        height="250px"
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="设备名称" align="center" prop="equipmentName" />
        
        <el-table-column
          label="设备状态"
          align="center"
          prop="equipmentType"
          :formatter="statusFormat"
        />
        <el-table-column label="任务名称" align="center" prop="taskName" />
        <el-table-column label="当前进度" align="center" prop="status">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="15"
              :percentage="parseFloat(scope.row.productionStatus)"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="当前层数/总层数"
          align="center"
          prop="status"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span
                :style="{
                  color: scope.row.currentLayerFinished > 0 ? '#1890FF' : '',
                }"
                >{{ scope.row.currentLayerFinished }}</span
              >/{{ scope.row.detail }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="预计剩余时间"
          align="center"
          prop="status"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.second }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="排队任务"
          align="center"
          prop="taskQuantity"
          width="120"
        >
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        small
        layout="prev, pager, next"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listInfo } from "@/api/equipment/info";
export default {
  props: ["statusOptions"],
  data() {
    return {
      equipmentList: [],
      loading: true,
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentCategoryId: 1,
        equipmentName: null,
        responseManId: null,
        equipmentType: null,
      },
    };
  },
  methods: {
    getList() {
      this.loading = true;
      
      // if(this.queryParams.equipmentType==null)
      if(this.queryParams.equipmentType==''){
        this.queryParams.equipmentType=null
      }
      
      listInfo(this.queryParams).then((response) => {
        this.equipmentList = response.rows;
        this.equipmentList.forEach((item) => {
          item.productionStatus = this.toPercent(item.productionStatus);
        });
        this.$parent.setRemainingTime(this.equipmentList)//时间倒计时
        this.total = response.total;
        this.loading = false;
      });
    },
    toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      // str+="%";
      return str;
    },
    getListPage(){
      this.queryParams.pageNum=1
      this.getList()
    },
    // 任务状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.equipmentType);
    },
  },
};
</script>

<style>
</style>